export class ThemeUtils {
    /**
     * 更新颜色选择器值（本地存储）
     * @param {string} id - 主题 ID
     * @param {string} key - 颜色选择器名称
     */
    static updateColorToLocalStorage(id, key){
        const color = window.getSettingsFromUserSettings(key, 'color');
        // 方括号包裹变量名，才能将变量作为对象的键名，不然会直接使用 key 作为属性名
        window.AppUtils.updateLocalStorage('Themes', {user: {[id]: {[key]: color}}});
    }

    /**
     * 更新颜色选择器值对应的元素（页面）
     * @param {string} key - 颜色选择器名称
     * @param {string} value - 颜色选择器值
     */
    static setElementStyles(key, value) {
        const $element = window.jQuery(window.colorConfigs[key])
        if ($element.length === 0) return;
        let styleName = 'color';
        if (key.endsWith('BgColor')) {
            styleName = 'background-color';
        } else if (key.endsWith('BorderColor')) {
            $element.attr('onfocus', `this.style.borderColor='${value}'`);
            return;
        }
        $element.css(styleName, value);
    }

    /**
     * 更新颜色选择器值与文本描述（页面）
     * @param {string} key - 颜色选择器名称
     * @param {string} value - 取样值
     */
    static toggleColor(key, value) {
        const $color = window.jQuery(`input[name="${key}"]`);
        if($color.length === 0) {
            console.error(`[module] 未找到颜色选择器控件: #${key}`);
            return;
        }
        $color.val(value);
        this.setElementStyles(key, value);

        // 找到对应的显示 span 元素（通过 ID 匹配）
        const $span = window.jQuery(`#${$color.attr('id')}Value`);
        $span.text(value);
    }

    /**
     * 监听所有颜色选择器更新事件
     */
    static bindColorEvents(config) {
        Object.keys(config).forEach(name => {
            const $color = window.jQuery(`input[name="${name}"]`);
            $color.on('input', function () {
                 // 获取当前颜色值
                const colorValue = window.jQuery(this).val();
                ThemeUtils.setElementStyles(name, colorValue);
            });
            $color.on('change', function () {
                // 获取当前颜色值
                const colorValue = window.jQuery(this).val();
                ThemeUtils.toggleColor(name, colorValue);
            });
        });
    }

    /**
     * 初始化所有颜色选择器值（页面）
     */
    static bindInitColor(config) {
        Object.keys(config).forEach(name => {
            const colorValue = window.getSettingsFromUserSettings(name, 'color');
            ThemeUtils.toggleColor(name, colorValue);
        });
    }

    static initColor() {
        this.bindInitColor(window.colorConfigs);
        this.bindColorEvents(window.colorConfigs);
    }
}